<!doctype html>
<html lang="en">
<head>
    <?php include './inc/css.html'; ?>

    <style type="text/css">
        html,body{
            height: 100%;
        }
        .ion-ios-more::before{display: none;}
        .wrap{
            margin:0 !important;
        }
        .row {
            margin-right: 0px;
            margin-left: 0px;
        }

         #showresume{
          border:1px solid #eee;
          border-right:none;
          background:#eee;
          line-height: .4rem;
          height: .4rem;
          display: inline-block;
          width: 100%;

         }
         #showresume::after{
          content: '';
          background:#eee;
          position: absolute;
          border-top: 1px solid #eee;
          border-right: 1px solid #eee;
          width: .28rem;
          height: .28rem;
          top: .059rem;
          right: .01rem;
          border-radius: 0 0 0 100%;
          transform: rotate(45deg);

         }

         .preview{
          height:.8rem;
          box-shadow: 0 0 2px #ddd;
          margin: .1rem auto;
          border-radius: .02rem;
          font-size: 120%;
          background-color:#f5f5f5;
          background-position: center center;
          background-size:cover;
          background-repeat: no-repeat;

         }


    </style>

</head>
<body class="">


<!-- 页面头部 -->
<?php include './inc/pagetitle.html'; ?>


<div class="wrap">
    <div class="row">
            <form class="form-horizontal m-t" id="infoForm" novalidate="novalidate">

              <div class="form-group">
                <!-- <label for="nickname" class="col-xs-3 control-label _text_secondary">型号:</label> -->
                <div class="col-xs-7">
                  <input type="input" id="equtype" name="equtype" class="form-control"  placeholder="请填写设备型号">
                </div>
                 <div class="col-xs-4">
                   <a id="showresume" href="./equ_detail.php" class=" tc _text_primary"> 设备履历</a>
                </div>
              </div>    

              <div class="form-group">
                <!-- <label for="school" class="col-xs-3 control-label _text_secondary">终端:</label> -->
                <div class="col-xs-12">
                    <select class="form-control" id="equid" name="equid" value="">
                      <option value ="">请选择终端</option>
                    <?php for($i=1;$i<11;$i++){ ?>
                      <option value ="<?php echo $i; ?>"><?php echo '终端'.$i; ?></option>
                    <?php } ?>

                    </select>

                </div>
              </div>    



              <div class="form-group">
                <!-- <label for="username" class="col-xs-3 control-label _text_secondary">问题:</label> -->
                <div class="col-xs-12">
                  <textarea id="equdetail" name="equdetail" class="form-control" onpropertychange="this.style.height=this.scrollHeight+'px';" oninput="this.style.height=this.scrollHeight+'px';"  placeholder="请填写设备问题描述"></textarea>
                </div>
              </div>    

              <div id="imglist" class="form-group" >
                 <input type="file" accept="image/*" name="wx_code" id="inputImage" value=""  class="hide">

                <div class="col-xs-4">
                  <div class="preview center">
                    <span class="ion-ios-camera-outline"></span>
                  </div>
                </div>

              </div>

              <div class="form-group">
                <div class="col-xs-offset-1 col-xs-10">
                  <button id="sendrepair" class="btn btn-block btn-success">提 交</button>
                </div>         
              </div>
            </form>
    </div>
</div>

</body>
<?php include './inc/js.html'; ?>

<script type="text/javascript">




var time = 60;
var imglength = 6;
var uploadimg = '<div class="col-xs-4 animated fadeIn"><div class="preview center"><span class="ion-ios-camera-outline"></span></div></div>';
var el = $('#imglist');
var ajaxFlag = false;

$(function(){




  var appendUpload = function(){

    if($('.preview').length>= imglength )return; //超过数量不添加图片
    if($('#imglist .col-xs-4:last-child .preview').css('background-image')=='none') return;//最后一张未上传也不添加（更新某一张图片的时候）
    el.append(uploadimg);
  }

    $('#inputImage').on('change',function(){
        var formData = new FormData();
        formData.append("upfile", this.files[0]);
        var request = new XMLHttpRequest();
        request.open("POST", "/index.php/WebApp/Notify/uploadPic");
        console.log(formData);
        request.onload = function (e) {
            if (request.status == 200) {
                var res = JSON.parse(e.target.responseText);
                var url = res.url;
                preview.css({"background-image":"url('"+url+"')"});//前台预览
                preview.data('url',url);//保存到data用于后面上传
                appendUpload();
            }
        };
        request.send(formData);
    })


    $('body').on('click','.preview',function(){
      preview = $(this);
      $('#inputImage').click();

    })



    $('#sendrepair').on('click',function(e){

        e.preventDefault();
        var equtype = $.trim($('input[name=equtype]').val());
        var equid = $.trim($('#equid').val());
        var equdetail = $.trim($('#equdetail').val());


        if(equtype.length==0||equid.length==0||equdetail.length==0){
            layer.msg('请填写完整设备报修信息');
            return;
        }

        var imgstr = '';
        $('#imglist .preview').each(function(i){

          var url = $(this).data('url');
          if(url!=undefined&&url.length>0){
            imgstr+=url+',';//逗号分隔
          }
        });



        var data = {
            "equtype":equtype,
            "equid":equid,
            'equdetail':equdetail,
            "equimg" : imgstr

        };


        layer.msg(JSON.stringify(data));
        return;
        $.post('postrepair.php',data ,function(result){
             layer.msg(result);
        })

               
    })




})
</script>

</html>